<template>
  <a-timeline style="margin-top: 20px">
    <a-timeline-item v-for="item in mApprovalRecord" :key="item.id">
      <a-row>
        <a-col :span="24">
          <a-space>
            <span>{{ item.displayName }}</span>
            <span>{{ item.finishTime }}</span>
          </a-space>
        </a-col>
        <a-col :span="24">
          <a-space>
            <span><UserOutlined /></span>
            <span>{{ item.ext?.u_realName }}</span>
            <span>
              <a-tag>
                {{ filterDictTextByCache('wf_process_submit_type', item.ext?.submitType) }}
              </a-tag>
            </span>
          </a-space>
        </a-col>
        <a-col :span="24">
          <a-space>
            <span><AliwangwangOutlined /></span>
            <span>{{ item.ext?.tf_approvalComment || '无' }}</span>
          </a-space>
        </a-col>
      </a-row>
    </a-timeline-item>
  </a-timeline>
</template>

<script>
  import { defineComponent, ref, watch } from 'vue';
  import { UserOutlined, AliwangwangOutlined } from '@ant-design/icons-vue';
  import { filterDictTextByCache } from '/@/utils/dict/JDictSelectUtil';

  export default defineComponent({
    name: 'ApproalRecordTime',
    components: {
      UserOutlined,
      AliwangwangOutlined,
    },
    props: {
      approvalRecord: {
        type: Array,
      },
    },
    setup(props) {
      const mApprovalRecord = ref(props.approvalRecord || []);
      watch(
        () => props.approvalRecord,
        () => {
          mApprovalRecord.value = props.approvalRecord || [];
        },
        {
          deep: true,
        }
      );

      return {
        mApprovalRecord,
        filterDictTextByCache,
      };
    },
  });
</script>
